<template>
    <div>
        <div class="details" v-if="Object.keys(details).length">
            <header-test name="商品详情" class="detail_header" :back="'/home'" />
            <div class="goodsCoverImg">
                <img :src="$filters.prefix(details.goodsCoverImg)" :alt="details.tag"/>
            </div>
            <div class="good_info">
                <div>
                    {{ details.goodsName }}
                </div>
                <div class="details_tip">免邮费 顺丰包邮</div>
                <div class="good_price">￥ {{ details.originalPrice }}</div>
                <div>
                    <ul class="good_info_options">
                        <li>概述</li>
                        <li>参数</li>
                        <li>安装服务</li>
                        <li>常见问题</li>
                    </ul>
                </div>
            </div>
            <div v-html="details.goodsDetailContent"></div>
        </div>
        <div>
            <van-action-bar>
                <van-action-bar-icon icon="chat-o" text="客服"/>
                <van-action-bar-icon
                    icon="cart-o"
                    text="购物车"
                    :badge="count?count:''"
                    @click="goToCart"
                />
                <van-action-bar-button
                    type="warning"
                    text="加入购物车"
                    @click="addtoCart(details)"
                />
                <van-action-bar-button type="danger" text="立即购买"/>
            </van-action-bar>
        </div>
    </div>
</template>

<script>
import {
    computed,
    onMounted,
    reactive,
    toRefs,
} from "@vue/runtime-core";
import { useRoute,useRouter } from "vue-router";
import { getDetail } from "@/service/good";
import { addCart } from "@/service/cart";
import HeaderTest from "@/components/HeaderTest.vue";
import { Toast } from "vant";
import store from "@/store/index";

export default {
    components: { HeaderTest },
    setup() {
        const route = useRoute();
        const router = useRouter();
        const state = reactive({ details:{}, });

        onMounted(async()=>{
            const { id } = route.params;
            const { data } = await getDetail(id);
            state.details = data;
            store.dispatch("updateCart");
        });

        const addtoCart = async(goodInfo) => {
            try{
                const {goodsId} = goodInfo;
                const params = {
                    goodsCount:1,
                    goodsId,
                };
                const res = await addCart(params);
                if(res?.resultCode === 200){
                    Toast.success("添加成功");
                }
            } catch(error) {
                console.log(error);
            }
            store.dispatch("updateCart");
        };
        const goToCart = () => {
            router.push({
                path: "/cart",
            });
        };
        const count = computed(() => {
            return store.state.cartCount;
        });
        return {
            ...toRefs(state),
            addtoCart,
            goToCart,
            count,
        };
    },
};

</script>

<style lang="less" scoped>
.details {
    .details_header {
        background: white;
    }
    .goodsCoverImg {
        > img {
            width: 100%;
        }
    }
    .good_info {
        padding: 0 1rem;
        text-align: left;
        font-size: 1.1rem;
        .details_tip {
            font-size: 0.9rem;
            margin: 0.5rem 0;
            color: #9999;
        }
        .good_price {
            color:red;
            font-size: 1.5rem;
        }
        .good_info_options {
            display: flex;
            justify-content: space-between;
            text-align: center;
            :nth-child(n):not(:last-child){
                border-right: 1px solid #9999;
            }
            > li {
                flex: 1;
            }
        }
    }
}
</style>